interface Props {
	isView?: boolean;
}

import { ProForm, ProFormDependency, ProFormInstance, ProFormList, ProFormText } from "@ant-design/pro-components";
import styles from "./index.module.less";
import { Fragment, useEffect, useRef, useState } from "react";
import { Space, Image, Button, Affix, Flex, message } from "antd";
import Upload from "@/components/Upload";
import { CheckCircleOutlined } from "@ant-design/icons";
import { MAIN_PRIMARY_COLOR } from "@/enums";
import { useRequest } from "ahooks";
import Loading from "@/components/Loading";
import { isEmpty, map, join, omit } from "lodash";
import { RESULT_CODES } from "@/api/helper/ResultCode";
import { addBanner2, getBanner2List } from "@/api/modules/course";

export default (props: Props) => {
	const formRef = useRef<ProFormInstance | undefined>();
	const { data, loading, run } = useRequest(getBanner2List);
	const [isEdit, setIsEdit] = useState(false);
	const { loading: editLoading, runAsync } = useRequest(addBanner2, { manual: true });

	useEffect(() => {
		if (!isEmpty(data?.data)) {
			formRef.current?.setFieldsValue(data?.data);
		}
	}, [data]);

	const handleBack = () => {
		setIsEdit(false);
		run();
	};

	const handleSubmit = () => {
		formRef.current?.validateFieldsReturnFormatValue?.().then(values => {
			runAsync({
				...(data?.data ?? {}),
				...values
			}).then(res => {
				if (res?.code === RESULT_CODES.SUCCESS) {
					message.success("保存成功");
					setIsEdit(false);
				}
			});
		});
	};

	return (
		<Loading isHeight100={true} loading={loading}>
			<div className={styles.container}>
				{/* <div className={styles.msg}>建议尺寸：1065*360px，小于5M的JPG/PNG格式图片</div> */}
				<ProForm
					disabled={!isEdit}
					className={styles.form}
					submitter={false}
					formRef={formRef}
					layout="horizontal"
					labelCol={{ span: 4 }}
				>
					<div className={styles.upload1}>
						<ProForm.Item label="banner背景图" name="back_img" rules={[{ required: true, message: "请上传" }]}>
							<Upload
								canRemove={isEdit}
								isView={!isEdit}
								resFormat={res => join(map(res, "url"), ",")}
								maxSize={3}
								msg={"945x360px，大小3m内；"}
							/>
						</ProForm.Item>
					</div>
					<div className={styles.upload2}>
						<ProForm.Item label="banner左侧图" name="cover_img" rules={[{ required: true, message: "请上传" }]}>
							<Upload
								canRemove={isEdit}
								isView={!isEdit}
								resFormat={res => join(map(res, "url"), ",")}
								maxSize={3}
								msg={"图片要求：204*270px，大小3m内；"}
							/>
						</ProForm.Item>
					</div>
					<ProFormText
						name="course_id"
						label="课程ID"
						placeholder={"请输入课程ID"}
						rules={[{ required: true, message: "请输入" }]}
					/>
				</ProForm>
				<Affix offsetBottom={0}>
					<Flex justify="center" className={styles.btns}>
						<Space size={10}>
							{isEdit ? (
								<>
									<Button ghost type="primary" onClick={() => handleBack()}>
										取消
									</Button>
									<Button loading={editLoading} ghost type="primary" onClick={() => handleSubmit()}>
										保存发布
									</Button>

									{/* <Space size={10}>
										<CheckCircleOutlined style={{ color: MAIN_PRIMARY_COLOR }} />
										<span style={{ color: "#000" }}>最后保存于2024-05-26</span>
									</Space> */}
								</>
							) : (
								<Button onClick={() => setIsEdit(true)} type="primary">
									编辑
								</Button>
							)}
						</Space>
					</Flex>
				</Affix>
			</div>
		</Loading>
	);
};
